<template>
  <div>
    <div
      class="table-content-right-btn"
      :class="{'collapsed': isCollapsed }"
      >
      <p :class="{'tx-h4 text-primary': isDescription, 'tx-body-big': !isDescription}">
        {{ title }}
      </p>
      <div class="icon__plus" @click="toggleCollapse"></div>
    </div>
    <div class="collapse" :class="{'show': !isCollapsed || collapsing, 'collapsing': collapsing }">
      <div
        class="table-content-right-detail"
        v-html="detail"
      ></div>
    </div>
    <div
      class="table-content-right-or tx-body-big"
      v-if="index < maxIndex"
    >
      OR
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue';

defineOptions({
  name: 'TheCollapse'
});

interface Props {
  isDescription?: boolean;
  index?: number;
  maxIndex?: number;
  collapseID?: string;
  title?: string;
  detail?: string;
}

withDefaults(defineProps<Props>(), {
  isDescription: false,
  index: 0,
  maxIndex: 0,
  collapseID: "",
  title: "",
  detail: ""
});

const isCollapsed = ref(true);
const collapsing = ref(false);

const toggleCollapse = () => {
  isCollapsed.value = !isCollapsed.value;
  collapsing.value = true;
  // 动画时长应该与 CSS 过渡时间匹配（350ms）
  setTimeout(() => {
    collapsing.value = false;
  }, 360);
}
</script>

<style lang="scss" scoped>
.tx-h4,h4 {
  font-size: 24px;
  font-weight: 500;
  line-height: 1.5
}

@media(max-width: 767.98px) {
  .tx-h4,h4 {
      font-size:20px;
      line-height: 1.2;
      letter-spacing: -.005em
  }
}

.text-primary {
  --bs-text-opacity: 1;
  color: rgba(0,72,232,var(--bs-text-opacity))!important;
}

.tx-body-big {
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: .01em
}

@media(max-width: 1023.98px) {
  .tx-body-big {
      line-height:1.25;
      letter-spacing: .04em
  }
}

@media(max-width: 767.98px) {
  .tx-body-big {
      font-size:14px;
      line-height: 1.285;
      letter-spacing: .02em
  }
}

p {
  font-size: 16px;
  font-weight: 400;
  line-height: 1.75
}

@media(max-width: 1023.98px) {
  p {
    font-size:14px;
    line-height: 1.714;
    letter-spacing: .01em
  }
}

.fade:not(.show) {
  opacity: 0
}

.collapse {
  overflow: hidden;
  transition: max-height 0.35s ease;
  max-height: 0;
}

.collapse.show {
  max-height: 1000px;
}

.collapsing {
  max-height: 1000px;
  overflow: hidden;
  transition: max-height 1s ease;
}

@media(prefers-reduced-motion:reduce) {
  .collapse,
  .collapsing {
    transition: none;
  }

  .table-content-right-btn .icon__plus::before,
  .table-content-right-btn .icon__plus::after {
    transition: none;
  }
}

.table-content {
  display: flex;
}

.table-content:nth-child(2n) {
  background-color: #F2F8FF;
}

.table-content-right {
  width: 65.9%;
  padding: 46px 15.5px;
}

.table-content-right-btn {
  color: var(--text-color--secondary, #{#0032A0});
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
}

.table-content-right-btn .icon__plus {
  position: relative;
  /* 扩大点击区域 */
  padding: 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 11px;
  height: 11px;
}

.table-content-right-btn .icon__plus:hover {
  opacity: 0.8;
}

/* 水平线 */
.table-content-right-btn .icon__plus::before {
  transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  position: absolute;
  content: '';
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 11px;
  height: 3px;
  border-radius: 2px;
  background-color: var(--text-color--secondary, #{#0032A0});
}

/* 竖直线（收起时显示） */
.table-content-right-btn .icon__plus::after {
  transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  position: absolute;
  content: '';
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scaleY(1);
  width: 3px;
  height: 11px;
  border-radius: 2px;
  background-color: var(--text-color--secondary, #{#0032A0});
}

/* 展开时隐藏竖直线 */
.table-content-right-btn:not(.collapsed) .icon__plus::after {
  transform: translate(-50%, -50%) scaleY(0);
}

.table-content-right-or {
  padding: 25px 0;
  color: var(--quote-line-color, #FF0044);
}

.table-content-right-detail {
  padding-top: 32px;
  padding-bottom: 40px;
}
.table-content-right-detail * {
  font-size: 16px;
  font-weight: 400;
  line-height: 1.75;
  color: #1a1c20;
}
</style>
